<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta charset="utf-8">
    <title>课程编辑</title>
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/favicon.ico"/>
    <link rel="bookmark" href="${pageContext.request.contextPath}/favicon.ico"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/webjars/layui/css/layui.css" media="all">
    <script type="application/javascript" src="${pageContext.request.contextPath}/webjars/layui/layui.js"
            charset="utf-8"></script>
    <script type="application/javascript" src="${pageContext.request.contextPath}/webjars/jquery/jquery.js"></script>
    <script type="application/javascript"
            src="${pageContext.request.contextPath}/private/js/loading/ajaxloading.js"></script>
</head>
<body>
<form id="form1" class="layui-form" action="">
    <table width="96%" align="center">
        <tr height="23">
            <td align="center">课程名称:</td>
            <td align="left">
                <input type="hidden" id="classid" name="classid" value="${classinfo.classid}">
                <input id="classname" name="classname" class="layui-input" type="text" placeholder="请输入课程名称" autocomplete="off"
                       lay-verify="classname" value="${classinfo.classname}">
            </td>
        </tr>
        <tr height="23">
            <td align="center">课程描述:</td>
            <td align="left">
                <textarea name="details" placeholder="请输入课程概要信息，可不填" class="layui-textarea"
                          lay-verify="details">${classinfo.details}</textarea>
            </td>
        </tr>
        <tr height="23">
            <td align="center">总课时:</td>
            <td align="left">
                <input id="hours" name="hours" class="layui-input" type="text" placeholder="请输入总课时" autocomplete="off"
                       lay-verify="number" value="${classinfo.hours}">
            </td>
        </tr>

        <tr height="23">
            <td nowrap="nowrap">课程配图:</td>
            <td nowrap="nowrap">
                <button class="layui-btn" id="uploadimg" type="button">上传图片(jpg|png)</button>
                <input id="newimgurl" name="newimgurl" type="hidden">
            </td>
        </tr>
        <tr height="23">
            <td nowrap="nowrap">已上传配图展示:</td>
            <td nowrap="nowrap">
                <img id="picid" src="${pageContext.request.contextPath}${classinfo.imgcode}" width="370" height="260" />
            </td>
        </tr>

        <tr height="50">
            <td align="center">
                <button id="formsubmit" class="layui-btn" lay-submit lay-filter="saveroleinfo">保存</button>
            </td>
        </tr>
    </table>
</form>
</body>
<script type="application/javascript">
    var form;
    layui.use(['form','upload'], function(){
        form = layui.form;
        var upload = layui.upload;

        //表单验证规则自定义
        form.verify({
            classname: function(value){
                if(!value) {
                    return '课程名称不能为空';
                }
            }
        });

        //监听提交
        form.on('submit(saveroleinfo)', function(data){
            $.ajax({
                data : data.field,
                type : "POST",
                url : "${pageContext.request.contextPath}/eyas/classinfo/saveClassInfo",
                dataType : "json",
                success: function(data) {
                    layer.msg("保存成功,页面将在1秒后关闭");
                    setTimeout(function () {
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(index); //再执行关闭
                    },1000);
                },
                error:function(xdata){
                    layer.msg(xdata.responseJSON.errormsg);
                }
            });
            return false;
        });


        //图片上传
        upload.render({
            elem: '#uploadimg'
            ,url: '${pageContext.request.contextPath}/eyas/classinfo/uploadpic'
            ,exts: 'jpg|png' //只允许上传图片
            ,size: 500 //限制文件大小，单位 KB
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#picid').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    $('#picid').attr('src', ''); //图片链接（base64）
                    return layer.msg('上传失败');
                }
                //上传成功
                $('#newimgurl').val(res.url);
            }
            ,error: function(){
                //演示失败状态，并实现重传
                $('#picid').attr('src', ''); //图片链接（base64）
                return layer.msg('上传失败');
            }
        });

    });

</script>
</html>
